<template>
  <div
    class="headbar flex-between"
    :class="isCollapse ? 'headbar-width-change' : ''"
  >
    <!-- 导航菜单收缩 -->
    <div class="collapseCon" @click="changeCollapse">
      <el-icon class="collapseCon-icon">
        <Menu />
      </el-icon>
    </div>
    <!-- 导航菜单右 -->
    <div class="rightBar">
      <!-- 用户信息 -->
      <span class="userInfo">
        {{ user.name }}
        <img :src="user.img" class="userImg" />
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useMenuStore } from "../../store/index";

const isCollapse = ref(false);
const menuStore = useMenuStore();

const user = ref({
  name: "admin",
  img: "",
});

const changeCollapse = () => {
  isCollapse.value = !isCollapse.value;
  menuStore.$patch((state) => {
    state.isCollapse = isCollapse.value;
    console.log(menuStore.isCollapse);
  });
};

onMounted(() => {
  isCollapse.value = menuStore.isCollapse;
});
</script>

<style lang="less">
.headbar {
  color: #fff;
  height: 60px;
  width: calc(100vw - 212px);
  border-color: rgba(180, 190, 190, 0.8);
  border-left-width: 1px;
  border-left-style: solid;
  background-color: #409eff;
  .collapseCon {
    .collapseCon-icon {
      width: 60px;
      height: 60px;
      cursor: pointer;
      background-color: #409eff;
    }
  }
  .collapseCon :hover {
    background-color: #3b8ad8;
  }
  .rightBar {
    margin-right: 10px;
  }
}
.headbar-width-change {
  width: calc(100vw - 80px);
}
</style>
